---
type: tutorial
title: Blog-Beitragsarchiv erstellen
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Nutze import.meta.glob(), um auf Daten aus Dateien in deinem Projekt zuzugreifen
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, wo du ein paar Blog-Beiträge hast, die du verlinken kannst, ist es Zeit, die Blog-Seite so einzurichten, dass automatisch eine Liste davon erstellt wird!

<PreCheck>
  - mit `import.meta.glob()` auf die Daten aller deiner Beiträge gleichzeitig zuzugreifen
  - eine dynamisch generierte Liste der Beiträge auf deiner Blog-Seite anzuzeigen
  - den Code zu überarbeiten, um für jedes Listenelement eine `<BlogPost />`-Komponente zu verwenden
</PreCheck>

## Dynamische Anzeige einer Liste von Beiträgen

<Steps>
1. Füge den folgenden Code zu `blog.astro` hinzu, um Infos zu all deinen Markdown-Dateien zurückzugeben. 
   `import.meta.glob()` gibt ein Array von Objekten zurück, wobei jedes einem Blogbeitrag entspricht.

    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
    const pageTitle = "Mein Astro-Lernblog";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
      <ul>
        <li><a href="/posts/post-1/">Beitrag 1</a></li>
        <li><a href="/posts/post-2/">Beitrag 2</a></li>
        <li><a href="/posts/post-3/">Beitrag 3</a></li>
      </ul>
    </BaseLayout>
    ```

2. Um die ganze Liste der Beiträge dynamisch zu erstellen, indem du die Beitragstitel und URLs nutzt, ersetze deine einzelnen `<li>`-Tags durch den folgenden Astro-Code:

    ```astro title="src/pages/blog.astro" del={9,10,11} ins= {13}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
    const pageTitle = "Mein Astro-Lernblog";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
      <ul>
        <li><a href="/posts/post-1/">Beitrag 1</a></li>
        <li><a href="/posts/post-2/">Beitrag 2</a></li>
        <li><a href="/posts/post-3/">Beitrag 3</a></li>
        
        {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
      </ul>
    </BaseLayout>
    ```

    Deine ganze Liste von Blog-Beiträgen wird jetzt dynamisch mit der integrierten TypeScript-Unterstützung von Astro generiert, indem das von `import.meta.glob()` zurückgegebene Array zugeordnet wird.

3. Füge einen neuen Blogbeitrag hinzu, indem du eine neue Datei `post-4.md` in `src/pages/posts/` erstellst und einige Markdown-Inhalte hinzufügst. 
   Achte darauf, dass du mindestens die unten verwendeten Frontmatter-Eigenschaften einfügst.

    ```markdown
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Mein vierter Blogbeitrag
    author: Astro-Lernender
    description: "Dieser Beitrag wird eigenständig angezeigt!"
    image: 
      url: "https://docs.astro.build/default-og-image.png"
      alt: "Das Wort „astro“ vor einer Illustration von Planeten und Sternen."
    pubDate: 2022-08-08
    tags: ["astro", "erfolge"]
    ---
    Dieser Beitrag sollte zusammen mit meinen anderen Blogbeiträgen angezeigt werden, weil `import.meta.glob()` eine Liste aller meiner Beiträge zurückgibt, um meine Liste zu erstellen.
    ```

4. Schau dir deine Blog-Seite in der Browser-Vorschau unter `http://localhost:4321/blog` an und such nach einer aktualisierten Liste mit vier Einträgen, darunter dein neuer Blogbeitrag!
</Steps>

<Box icon="puzzle-piece">

## Challenge: Erstelle eine BlogPost-Komponente

Versuch selbst, alle notwendigen Änderungen an deinem Astro-Projekt vorzunehmen, damit du stattdessen den folgenden Code verwenden kannst, um deine Liste mit Blogbeiträgen zu erstellen:

```astro title="src/pages/blog.astro" del={2} ins={3}
<ul>
{allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
```

<details>
<summary>Erweitere, um die Schritte anzuzeigen</summary>

<Steps>
1. Erstelle eine neue Komponente in `src/components/`.

    <details>
    <summary>Zeige den Dateinamen an</summary>
    ```
    BlogPost.astro
    ```
    </details>

2. Schreib die Codezeile in deine Komponente, damit sie einen `title` und eine `url` als `Astro.props` empfangen kann.

    <details>
    <summary>Code anzeigen</summary>
    ```astro
    ---
    // src/components/BlogPost.astro
    const { title, url } = Astro.props;
    ---
    ```
    </details>

3. Füge die Vorlage hinzu, mit der du jedes Element in deiner Blogpost-Liste erstellst.

    <details>
    <summary>Code anzeigen</summary>
    ```astro
    <!-- src/components/BlogPost.astro -->
    <li><a href={url}>{title}</a></li>
    ```
    </details>

4. Importiere die neue Komponente in deine Blog-Seite.

    <details>
    <summary>Code anzeigen</summary>
    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
    const pageTitle = "Mein Astro-Lernblog";
    ---
    ```
    </details>

5. Überprüfe es selbst: Schau dir den fertigen Komponentencode an.

    <details>
    <summary>Code anzeigen</summary>
    ```astro title="src/components/BlogPost.astro"
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    ```
    ```astro title="src/pages/blog.astro" ins={3,10}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true }));
    const pageTitle = "Mein Astro-Lernblog";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Hier werde ich über meine Erfahrungen beim Lernen von Astro berichten.</p>
      <ul>
        {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>
    ```
    </details>
</Steps>
</details>
</Box>

<Box icon="question-mark">

### Test dein Wissen

Wenn deine Astro-Komponente die folgende Codezeile enthält: 

```astro
---
const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---
```

Wähle die Syntax, die du schreiben könntest, um Folgendes darzustellen:

1. Den Titel deines dritten Blogbeitrags.

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option isCorrect>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
      </Option>
    </MultipleChoice>

2. Einen Link zur URL deines ersten Blogbeitrags.

    <MultipleChoice>
      <Option>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option isCorrect>
        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
      </Option>
    </MultipleChoice>

3. Eine Komponente für jeden Beitrag, die das Datum der letzten Aktualisierung anzeigt.

    <MultipleChoice>
      <Option isCorrect>
        `myPosts.map((post) => <LastUpdated date={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `myPosts[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={myPosts[0].url}>Erster Beitrag!!</a>`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Checkliste
<Checklist>
- [ ] Ich kann Daten aus meinen lokalen Dateien abfragen.
- [ ] Ich kann eine Liste aller meiner Blog-Beiträge anzeigen.
</Checklist>
</Box>

### Ressourcen

- [Importieren von Glob-Mustern in Astro](/de/guides/imports/#importmetaglob)
